<template>
  <div>
    <div class="top">
      <div class="w">
        <i
          class="el-icon-s-order"
          style="color: rgb(255, 103, 0); font-size: 30px"
        ></i>
        <span style="font-size: 30px; font-weight: normal">订单页面</span>
      </div>
    </div>
    <div class="order-content w">
      <div class="content" v-for="(item, index) in order" :key="index">
        <div class="tou">
          <span class="s">订单编号:{{ item[0].order_id }}</span>
          <span>订单时间{{ new Date(item[0].order_time).format() }}</span>
        </div>
        <div class="table">
          <table width="100%">
            <tr>
              <td></td>
              <td>商品名称</td>
              <td>单价</td>
              <td>数量</td>
              <td>小计</td>
            </tr>
            <tr v-for="(item2, index2) in item" :key="index2">
              <td>
                <img
                  :src="`http://101.132.181.9/api/${item2.product_picture}`"
                  alt=""
                />
              </td>
              <td>{{ item2.product_name }}</td>
              <td>{{ item2.product_price }}</td>
              <td>{{ item2.product_num }}</td>
              <td>
                <font color="#ff6700">
                  {{ item2.product_price * item2.product_num }}元</font
                >
              </td>
            </tr>
          </table>
        </div>
        <div class="foot">
          <span>共{{ list[index].totalNum }}件商品</span>
          <font color="#ff6700"
            >合计:<font size="20px">{{ list[index].totalPrice }}</font
            >元</font
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrder } from "@/api/user";
export default {
  data() {
    return {
      order: [],
      list: [],
    };
  },
  mounted() {
    this.getorderlist();
  },
  methods: {
    async getorderlist() {
      const res = await getOrder({
        user_id: this.$store.getters.userID,
      });
      console.log(res.data);
      this.order = res.data.orders; // 的总数和总量，放入数组，然后在页面中利用循环的第几次的下标得到相应的 // 总数总量。

      // 利用watch监听请求到的订单数据，使用双层循环，先算出来每一次订单
      for (var i = 0; i < this.order.length; i++) {
        const aa = this.order[i];
        let totalNum = 0;
        let totalPrice = 0;
        for (let j = 0; j < aa.length; j++) {
          const bb = aa[j];
          totalNum += bb.product_num;
          totalPrice += bb.product_price * bb.product_num;
        }
        this.list.push({ totalNum, totalPrice });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  height: 70px;
  background: #fff !important;
  line-height: 70px;
  border-bottom: 2px solid rgb(255, 103, 0);
}
.content {
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 50px;
  text-align: center;
  .tou {
    margin: 0 40px;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .s {
      color: rgb(255, 103, 0);
    }
  }
  .table {
    border-top: 2px solid rgb(255, 103, 0);
    border-bottom: 2px solid rgb(255, 103, 0);
  }
  .foot {
    margin: 0 40px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    display: flex;
    justify-content: space-between;
  }
}
img {
  width: 80px;
  height: 80px;
}
</style>
